<template>
	<div class="app-container">
		<!-- 查询和其他操作 -->
		<div class="filter-container">
			<el-input v-model="listQuery.goodsName" clearable class="filter-item" style="width: 200px;"
			          placeholder="输入商品名称"/>
			<el-select v-model="listQuery.status" clearable style="width: 200px" class="filter-item"
			           placeholder="选择商品状态">
				<el-option v-for="(key, value) in goodsStatusMap" :key="key" :label="key" :value="value"/>
			</el-select>
			<el-cascader :options="categoryOptions" :props="{ checkStrictly: true }" placeholder="请选择类目" clearable
			             class="filter-item" filterable style="width: 200px;" @change="handleCategoryOption"/>
			<el-button v-permission="[1, 2]" class="filter-item" type="primary" icon="el-icon-search"
			           @click="handleFilter">查找
			</el-button>
			<!--<el-button v-permission="[1, 2]" class="filter-item" type="primary" icon="el-icon-add"-->
			<!--           @click="handleCreate">添加-->
			<!--</el-button>-->
			<el-button v-permission="[1, 2]" :disabled="selectedIds.length === 0"
			           class="filter-item" type="danger" icon="el-icon-delete" @click="handleBatchDown">批量下架
			</el-button>
		</div>
		
		<!-- 查询结果 -->
		<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
		          highlight-current-row @selection-change="handleSelectionChange">
			
			<el-table-column align="center" type="selection" width="55"/>
			
			<el-table-column type="expand" label="详细信息">
				<template slot-scope="props">
					<el-form label-position="left" inline class="el-table-expand">
						<el-form-item label="商品规格">
							<span>{{ props.row.specification }}</span>
						</el-form-item>
						<el-form-item label="商品库存">
							<span>{{ props.row.stock }}</span>
						</el-form-item>
						<el-form-item label="价格">
							<span>￥{{ props.row.price }}</span>
						</el-form-item>
						<el-form-item label="生产商">
							<span>{{ props.row.producer }}</span>
						</el-form-item>
						<el-form-item label="生产日期">
							<span>{{ props.row.factoryTime | formatTime }}</span>
						</el-form-item>
						<el-form-item label="描述">
							<span>{{ props.row.description }}</span>
						</el-form-item>
						<el-form-item label="商品图片">
							<el-image
									style="width: 100px; height: 100px; cursor: pointer"
									v-for="(item, index) in props.row.goodsPicList" :key="index"
									:fit="'cover'"
									:src="item"
									@click="showViewer([item])">
							</el-image>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			
			
			<el-table-column align="center" width="160" label="操作">
				<template slot-scope="scope">
					<el-button v-permission="[1, 2]" type="primary" size="mini"
					           @click="handleUpdate(scope.row)">编辑
					</el-button>
					<el-button v-permission="[1, 2]" v-if="scope.row.isMarketable == 0" type="warning"
					           size="mini" @click="upOrDownBtn(scope.row,'下架')">下架
					</el-button>
					<el-button v-permission="[1, 2]" v-else type="success" size="mini"
					           @click="upOrDownBtn(scope.row,'上架')">上架
					</el-button>
				</template>
			</el-table-column>
			
			<el-table-column align="center" width="80" label="商品ID" prop="id"/>
			
			<el-table-column align="center" min-width="100" label="名称" prop="goodsName"/>
			
			<el-table-column align="center" width="120" label="图片" prop="goodsPicList">
				<template slot-scope="scope">
					<el-image
							style="width: 100px; height: 100px; cursor: pointer"
							:fit="'cover'"
							:src="scope.row.goodsPicList[0]"
							@click="showViewer(scope.row.goodsPicList)">
					</el-image>
				</template>
			</el-table-column>
			
			<el-table-column align="center" width="100" label="商品详情" prop="description">
				<template slot-scope="scope">
					<el-dialog :visible.sync="detailDialogVisible" title="商品详情">
						<div v-html="scope.row.description"/>
					</el-dialog>
					<el-button type="primary" size="mini" @click="showDetail(scope.row)">查看</el-button>
				</template>
			</el-table-column>
			
			<el-table-column align="center" label="类目">
				<template slot-scope="scope">
					{{ scope.row.categoryName }}/{{ scope.row.category2Name }}/{{ scope.row.category3Name }}
				</template>
			</el-table-column>
			
			<el-table-column align="center" width="80" label="销量" prop="salesNum"/>
			
			<el-table-column align="center" width="80" label="保证金" prop="depositRatio">
				<template slot-scope="scope">
					{{ scope.row.depositRatio }}%
				</template>
			</el-table-column>
			
			<el-table-column align="center" width="80" label="是否在售" prop="isMarketable">
				<template slot-scope="scope">
					<el-tag :type="scope.row.isMarketable == 0 ? 'success' : 'info' ">{{ scope.row.isMarketable == 0 ?
						'在售' : '下架' }}
					</el-tag>
				</template>
			</el-table-column>
		
		</el-table>
		
		<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
		            @pagination="getList"/>
		
		<el-tooltip placement="top" content="返回顶部">
			<back-to-top :visibility-height="100"/>
		</el-tooltip>
		
		<el-dialog :visible.sync="showImg" title="图片详情">
			<div v-for="(item, index) in url" :key="index">
				<img :src="item" width="100%">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {listGoods, upOrDownGoods, batchDeleteGoods} from '@/api/goods'
	import BackToTop from '@/components/BackToTop'
	import {categoryTree} from '@/api/category'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	
	export default {
		name: 'GoodsList',
		components: {BackToTop, Pagination},
		data() {
			return {
				list: undefined,
				total: 0,
				listLoading: true,
				categoryOptions: [],
				goodsStatusMap: {0: '下架', 1: '正常'},
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					goodsName: undefined,
					priceSort: undefined,
					salesNum: undefined,
					category1Id: undefined,
					category2Id: undefined,
					category3Id: undefined
				},
				goodsDetail: '',
				detailDialogVisible: false,
				selectedIds: [],
				url: [],
				showImg: false,
			}
		},
		created() {
			this.getList()
			this.refreshCategoryOptions()
		},
		methods: {
			getList() {
				this.listLoading = true
				listGoods(this.listQuery)
					.then(res => {
						this.list = res.data.records
						this.total = res.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			showViewer(row) {
				console.log(row)
				this.url = row
				this.showImg = true
			},
			closeViewer() {
				this.showImg = false
			},
			handleFilter() {
				this.listQuery.page = 1
				this.getList()
			},
			handleCreate() {
				this.$router.push({path: '/goods/upsert'})
			},
			handleUpdate(row) {
				this.$store.dispatch('clearGood')
				this.$store.dispatch('setGood', row)
				this.$router.push({path: '/goods/upsert', query: {id: row.id}})
			},
			showDetail(row) {
				if (!this.detailDialogVisible) {
					this.detailDialogVisible = true
				}
			},
			refreshCategoryOptions() {
				if (this.categoryOptions.length === 0) {
					categoryTree().then(res => {
						res.data.forEach(item => {
							let obj1 = {
								value: item.id,
								label: item.name,
								children: []
							}
							if (item.twoList.length > 0) {
								item.twoList.forEach(twoList => {
									let obj2 = {
										value: item.id + ',' + twoList.id,
										label: twoList.name,
										children: []
									}
									if (twoList.threeList.length > 0) {
										twoList.threeList.forEach(threeList => {
											let obj3 = {
												value: item.id + ',' + twoList.id + ',' + threeList.id,
												label: threeList.name
											}
											obj2.children.push(obj3)
										})
									}
									obj1.children.push(obj2)
								})
							}
							this.categoryOptions.push(obj1)
						})
					})
					console.log(this.categoryOptions)
				}
			},
			handleCategoryOption(e) {
				if (e !== undefined) {
					const tag = e[e.length - 1]
					switch (e.length) {
						case 1:
							this.listQuery.category1Id = tag
							break
						case 2:
							this.listQuery.category1Id = tag.split(',')[0]
							this.listQuery.category2Id = tag.split(',')[1]
							break
						case 3:
							this.listQuery.category1Id = tag.split(',')[0]
							this.listQuery.category2Id = tag.split(',')[1]
							this.listQuery.category3Id = tag.split(',')[2]
							break
					}
				} else {
					this.listQuery.category1Id = undefined
					this.listQuery.category2Id = undefined
					this.listQuery.category3Id = undefined
				}
			},
			upOrDownBtn(row, title) {
				upOrDownGoods([row.id], title).then(res => {
					this.$notify.success({
						title: '成功',
						message: title + '成功'
					})
					row.isMarketable == 0 ? row.isMarketable = 1 : row.isMarketable = 0
				}).catch(res => {
					this.$notify.error({
						title: '失败',
						message: res
					})
				})
			},
			handleSelectionChange(e) {
				const temp = []
				e.forEach(item => {
					temp.push(item.id)
				})
				this.selectedIds = temp
			},
			handleBatchDown(e) {
				// 执行批量下架
				upOrDownGoods(this.selectedIds, '下架').then(res => {
					this.$notify.success({
						title: '成功',
						message: '下架成功'
					})
					this.getList()
				}).catch(res => {
					this.$notify.error({
						title: '失败',
						message: res
					})
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.el-table-expand {
		font-size: 0;
	}
	
	.el-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
	
	.el-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>
